import Map from '@/map/index';
import { getGeoJsonByCode, getAllCity } from '@/utils/map-geojson/get-geojson';

const olMap = new Map('mapContainer');
olMap.layer.initLayer(); //初始化底图

const jsonData = getGeoJsonByCode('370000'); //获取JSON数据
let extent = olMap.layer.initMaskLayer(jsonData); //添加遮罩层,并将范围全局化
olMap.layer.fitExtentPadding(extent, 0); //跳转到遮罩层

olMap.layer.initBoundaryLayer(getAllCity()); //添加边界

let pointLayer = null;
//加点
const addPoint = () => {
    if (!pointLayer) {
        pointLayer = olMap.layer.createVectorLayer('点图层', 35);
    }
    pointLayer.getSource().clear();
    olMap.vector.addPoint({
        coordinates: [117.93266264415541, 36.07115382604098],
        layer: pointLayer,
        style: {
            radius: 10,
            fillColor: '#ff473d',
            strokeWidth: 1,
            strokeColor: 'rgba(255, 255, 255, 0.5)'
        },
        info: {
            name: 'pointInfo',
            info: { name: '测试' }
        }
    });
};
//清除点
const clearPoint = () => {
    if (pointLayer) {
        pointLayer.getSource().clear();
    }
};

let iconLayer = null;
//加图标
const addIcon = () => {
    if (!iconLayer) {
        iconLayer = olMap.layer.createVectorLayer('点图层', 35);
    }
    iconLayer.getSource().clear();
    olMap.vector.addIcon({
        coordinates: [117.93266264415541, 36.07115382604098],
        layer: iconLayer,
        style: {
            src: new URL('@/assets/images/test/point.gif', import.meta.url).href
        },
        info: {
            name: 'pointInfo',
            info: { name: '测试' }
        }
    });
};
//清除图标
const clearIcon = () => {
    if (iconLayer) {
        iconLayer.getSource().clear();
    }
};

let textLayer = null;
//加文本
const addText = () => {
    if (!textLayer) {
        textLayer = olMap.layer.createVectorLayer('点图层', 35);
    }
    textLayer.getSource().clear();
    olMap.vector.addText({
        coordinates: [117.93266264415541, 36.07115382604098],
        layer: textLayer,
        style: {
            text: '文本'
        },
        info: {
            name: 'pointInfo',
            info: { name: '测试' }
        }
    });
};
//清除文本
const clearText = () => {
    if (textLayer) {
        textLayer.getSource().clear();
    }
};

let lineLayer = null;
//加线
const addLine = () => {
    if (!lineLayer) {
        lineLayer = olMap.layer.createVectorLayer('线图层', 25);
    }
    lineLayer.getSource().clear();
    olMap.vector.addLine({
        coordinates: [
            [82.1592, 43.6108],
            [81.4186, 43.7517],
            [81.7078, 43.9794]
        ],
        layer: lineLayer,
        style: {},
        info: {
            name: 'pointInfo',
            info: { name: '测试' }
        }
    });
};
//清除线
const clearLine = () => {
    if (lineLayer) {
        lineLayer.getSource().clear();
    }
};

let polygonLayer = null;
//加面
const addPolygon = () => {
    if (!polygonLayer) {
        polygonLayer = olMap.layer.createVectorLayer('面图层', 15);
    }
    polygonLayer.getSource().clear();
    olMap.vector.addPolygon({
        coordinates: [
            [82.1592, 43.6108],
            [81.4186, 43.7517],
            [81.7078, 43.9794],
            [82.1592, 43.6108]
        ],
        layer: polygonLayer,
        style: {},
        info: {
            name: 'pointInfo',
            info: { name: '测试' }
        }
    });
};
//清除面
const clearPolygon = () => {
    if (polygonLayer) {
        polygonLayer.getSource().clear();
    }
};

//添加聚合点
let clusterLayer = null;
const addClusterPoints = () => {
    let arr = [
        [82.1592, 43.6108],
        [81.4186, 43.7517],
        [81.7078, 43.9794],
        [80.5406, 44.2622],
        [80.9444, 43.5036],
        [81.5181, 43.595],
        [80.5047, 44.3283],
        [80.9008, 43.9647],
        [83.4211, 42.4694],
        [80.8103, 43.8022],
        [81.1492, 43.8703],
        [84.1267, 43.7028],
        [80.7506, 44.4411],
        [80.7375, 44.0306],
        [81.5569, 43.1703],
        [81.3278, 44.0242],
        [84.965, 45.4689],
        [80.6978, 41.8194],
        [81.2592, 43.8069],
        [82.8311, 46.4022],
        [81.5283, 44.1342],
        [80.4083, 44.1725],
        [80.8458, 44.0489],
        [80.6344, 44.3994],
        [81.6908, 43.7475],
        [81.3264, 43.9406],
        [81.3458, 44.5078],
        [81.3356, 44.1172],
        [83.0461, 44.4806],
        [81.3108, 43.8839],
        [82.8469, 35.685],
        [86.1414, 44.7958],
        [81.1481, 43.8317],
        [80.5417, 43.9597],
        [81.4808, 43.8122],
        [86.3433, 45.0992],
        [80.3839, 44.3989],
        [82.7019, 44.3242],
        [80.8533, 43.0975],
        [80.2469, 44.9425],
        [80.7108, 44.1856],
        [80.9639, 44.3308],
        [80.8283, 44.1061],
        [81.9631, 43.9686],
        [81.0353, 43.9467],
        [85.2828, 45.8214],
        [86.2178, 44.9375],
        [80.7822, 43.5489],
        [81.6061, 44.0583],
        [89.68, 38.4783],
        [82.2853, 43.8111],
        [84.4942, 43.8781],
        [82.8689, 44.1814],
        [80.8589, 44.3139],
        [81.3769, 43.9178],
        [80.9536, 43.8272],
        [81.1781, 44.4797],
        [81.3636, 43.6303],
        [82.3458, 43.8669],
        [90.0286, 43.2372],
        [81.9447, 43.8208],
        [81.4103, 43.8656],
        [80.7803, 44.1431],
        [80.6208, 44.9344],
        [87.1883, 43.4464],
        [80.9822, 43.5525],
        [82.1756, 43.8592],
        [84.9697, 45.67],
        [87.8144, 45.6872],
        [84.7803, 45.4344],
        [80.8581, 43.8242],
        [81.2442, 44.0694],
        [81.6175, 44.2428],
        [81.8572, 43.7536],
        [80.9575, 43.1797],
        [84.8203, 45.6342],
        [82.0178, 43.7033],
        [85.8344, 45.9792],
        [80.4803, 44.3989],
        [80.4, 44.2333],
        [85.4189, 45.9169],
        [81.3844, 43.8092],
        [81.2772, 44.1244],
        [81.3231, 43.5736],
        [85.3119, 43.2242],
        [81.8106, 43.9406],
        [85.5561, 43.2464],
        [82.2247, 43.4717],
        [86.8792, 45.8522],
        [81.7036, 43.6583],
        [81.9144, 43.5742],
        [81.3547, 43.8283],
        [80.7536, 43.7842],
        [81.5408, 43.2339],
        [80.5661, 44.2825],
        [82.8539, 43.85],
        [81.8264, 43.6506],
        [86.8572, 45.4297],
        [82.0136, 43.4319],
        [81.0917, 43.9378],
        [82.005, 43.8378],
        [84.8719, 45.5719],
        [81.0975, 43.5728],
        [82.59, 43.32],
        [80.6372, 44.1258],
        [84.6031, 45.7181],
        [80.4189, 44.1975],
        [80.6339, 43.6703],
        [83.6933, 42.6878],
        [81.0722, 43.28],
        [84.8514, 43.2017],
        [81.9778, 43.9839],
        [81.5286, 43.9725],
        [80.5719, 44.0528],
        [81.5236, 44.1764],
        [81.3678, 44.0494],
        [81.0192, 43.5506],
        [87.6147, 45.2433],
        [80.5783, 42.6689],
        [81.6147, 43.9931],
        [82.0769, 44.0011],
        [81.2972, 43.2428],
        [86.3069, 44.8644],
        [82.4133, 43.9128],
        [85.9108, 45.1514],
        [85.2733, 45.1914],
        [85.9536, 43.0639],
        [81.7289, 43.3411],
        [80.6544, 43.9347],
        [81.0586, 43.8106],
        [81.6136, 43.6219],
        [81.8853, 43.3136],
        [83.2583, 43.3936],
        [81.7611, 43.8181],
        [82.4469, 43.6797],
        [80.6475, 43.7344],
        [81.6406, 43.7675],
        [81.4789, 43.9133],
        [81.0936, 43.9792],
        [80.9917, 43.6797],
        [80.8122, 44.1711],
        [85.6406, 45.9403],
        [81.6256, 43.9856],
        [80.7728, 44.3742],
        [81.4114, 43.9544]
    ];
    let features = [];
    arr.forEach((point) => {
        features.push(
            olMap.value.vector.setClusterPoint({
                coordinates: point,
                style: { src: new URL(`@/test/危岩.gif`, import.meta.url).href }
            })
        );
    });

    clusterLayer = olMap.value.vector.addClusterPoints({
        features: features,
        distance: 50
    });
};

//移除聚合点
const clearClusterPoints = () => {
    olMap.vector.clearClusterPoints();
};

// measure('area');
// measure('distance');
//测量
const measure = (type) => {
    olMap.value.measure.measure(type);
};

//清除测量
const clearMeasure = () => {
    olMap.value.measure.clear();
};

// changeBaseMap('vector')
// changeBaseMap('image')
// changeBaseMap('landform')
//切换底图
const changeBaseMap = (type) => {
    olMap.value.layer.changeBaseMap(type);
};

// startDrawing('Point');
// startDrawing('LineString');
// startDrawing('Circle');
// startDrawing('Rectangle');
// startDrawing('Polygon');
const startDrawing = (type) => {
    olMap.value.draw.startDrawing(type, false, (coordinates) => {
        console.log('绘制的坐标：', coordinates);
    });
};

//加地图弹窗
let overlay;
//两个参数，第一个为绑定的dom，第二个为点击事件返回的一个feature，拿到feature处理相应逻辑
const addOverlay = () => {
    overlay = olMap.value.overlay.setOverlay(document.getElementById('popupBox'), (feature) => {
        //如果feature有相应属性
        if (feature.pointInfo) {
            overlay.setPosition(feature.values_.geometry.flatCoordinates); //设置弹窗位置
            //......弹窗处理逻辑
        }
    });
};

//移动地图到某个点
const panTo = () => {
    olMap.value.panTo({
        coordinates: [116, 35], //中心坐标
        duration: 1000, //移动时间
        zoom: 10 //缩放级别
    });
};

//移动地图到某个图层
const fitLayer = () => {
    if (olMap.value.layer.getLayerByName('点图层')) {
        olMap.value.layer.fitLayer({
            layer: olMap.value.layer.getLayerByName('点图层'), //图层
            duration: 1000, //移动时间
            paddingList: [100, 100, 100, 100] //添加内边距
        });
    }
};

//移动地图到某个矩形范围
const fitExtentPadding = () => {
    olMap.value.layer.fitExtentPadding({
        extent: [114.819254, 34.377352, 122.715802, 38.401933], //矩形范围
        duration: 1000, //移动时间
        paddingList: [0, 0, 0, 0] //添加内边距
    });
};

//通过图层的layerName属性获取图层
const getLayerByName = () => {
    return olMap.value.layer.getLayerByName('测试图层');
};

//添加图片图层
const setImageLayer = () => {
    olMap.value.layer.setImageLayer(
        'https://120.220.101.53:8088/minio/sddzqx/geologicalFactors/07915bca6ed0414e81f8fc6b57c6c3fd.png', //图片地址
        [113, 32, 124, 39], //范围
        0.8 //透明度
    );
};

//添加图片图层
const removeImageLayer = () => {
    olMap.value.layer.removeImageLayer();
};
